<template>
  <div class="container">
    <!-- 总计 -->
    <el-alert
      :title="`数据一共 ${subjects.length} 条`"
      type="info"
      show-icon
      style=" margin-bottom: 15px"
      :closable="false"
    ></el-alert>

    <el-table :data="subjects" style="width: 100%" max-height="250">
      <el-table-column
        prop="number"
        label="试题编号"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="subject"
        label="学科"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="catalog"
        label="目录"
        width="120"
      ></el-table-column>
      <el-table-column prop="questionType" label="题型" width="120">
        <template slot-scope="scope">{{
          questionTypes(scope.row.questionType)
        }}</template>
      </el-table-column>
      <el-table-column prop="address" label="题干" width="300">
        <template slot-scope="scope">
          <div v-html="scope.row.question"></div>
        </template>
      </el-table-column>
      <el-table-column label="录入时间" width="160">
        <template slot-scope="scope">{{
          scope.row.addDate | parseTimeByString
        }}</template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" width="120">
        <template slot-scope="scope">{{
          difficulty(scope.row.difficulty)
        }}</template>
      </el-table-column>
      <el-table-column
        prop="creator"
        label="录入人"
        width="120"
      ></el-table-column>
      <el-table-column label="审核状态" width="120">
        <template slot-scope="scope">{{
          chkStates(scope.row.chkState)
        }}</template>
      </el-table-column>
      <el-table-column
        prop="chkRemarks"
        label="审核意见"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="chkUser"
        label="审核人"
        width="120"
      ></el-table-column>
      <el-table-column label="发布状态" width="120">
        <template slot-scope="scope">{{
          publishTypes(scope.row.publishState)
        }}</template>
      </el-table-column>
      <el-table-column prop label width="120"></el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="btnclick(scope.row.id)" type="text" size="small"
            >预览</el-button
          >
          <el-button
            @click="(toexamine = true), (questionsID = scope.row.id)"
            type="text"
            size="small"
            :class="{ disabled: scope.row.chkState !== 0 }"
            :disabled="scope.row.chkState !== 0"
            >审核</el-button
          >

          <el-button
            @click="toEdit(scope.row.id)"
            type="text"
            size="small"
            :disabled="scope.row.publishState === 0"
            >修改</el-button
          >
          <el-button
            @click="choiceAdd(scope.row, $event)"
            type="text"
            size="small"
            >{{ scope.row.publishState === 1 ? "上架" : "下架" }}</el-button
          >
          <el-button @click="del(scope.row.id)" type="text" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div>
      <elDialog :list="list" :showDialog.sync="showDialog"></elDialog>
      <toExamine :id="questionsID" :toexamine.sync="toexamine" @pushList='push()'></toExamine>
    </div>
  </div>
</template>

<script>

// 题库接口
import elDialog from './directorys-add'
import toExamine from './questions-check'
// 题库接口
import { detail, choicePublish, remove as subjecsRemove } from '@/api/hmmm/questions.js'
import {
  questionType, // 题型
  difficulty, // 难度
  chkType, // 精品审核
  publishType // 发布状态
} from '@/api/hmmm/constants.js'

export default {
  methods: {
    // async getChoice() {
    //  await choice(this.fromList);
    //   console.log('通过了这')
    // },

    getChoice () {
      this.$emit('getChoice')
    },
    // 预览
    async btnclick (id) {
      const { data } = await detail({ id })
      this.list = data
      this.showDialog = true
    },
    // 上架和下架试题
    async choiceAdd (item, e) {
      try {
        this.$confirm('您确认' + e.target.innerText + '这道题目吗?').then(
          async () => {
            if (item.publishState === 1) {
              item.publishState = 0
            } else if (item.publishState === 0) {
              item.publishState = 1
            }
            this.$message.success(e.target.innerText + '成功!')
            await choicePublish({
              id: item.id,
              publishState: item.publishState
            })
          }
        )
      } catch (err) {
        console.log(err)
      }
    },

    // 删除
    del (id) {
      try {
        this.$confirm('此操作将永久删除该学科, 是否继续?').then(async () => {
          await subjecsRemove({ id: id })
          this.$message.success('删除成功!')
          this.$emit('getChoices')
        })
      } catch (err) {
        console.log(err)
      }
    },
    // 去修改试题的页面
    toEdit (id) {
      this.$router.push({
        path: 'new',
        query: {
          id
        }
      })
    },
    deleteRow (index, rows) {
      rows.splice(index, 1)
    },
    questionTypes (num) {
      const obj = questionType.find(item => item.value == num)
      return obj.label
    },
    difficulty (num) {
      const obj = difficulty.find(item => item.value == num)
      return obj.label
    },
    chkStates (num) {
      const obj = chkType.find(item => item.value == num)
      return obj.label
    },
    publishTypes (num) {
      const obj = publishType.find(item => item.value == num)
      return obj.label
    }
  },
  data () {
    return {
      fromList: {
        page: 1,
        pagesize: 20 // 每页显示多少  /** */
      },
      list: {},
      showDialog: false,
      toexamine: false,
      questionsID: ''
    }
  },
  created () {
    this.getChoice()
  },
  props: ['subjects'],
  components: {
    elDialog,
    toExamine
  }
}
</script>

<style scoped lang="scss">
.disabled {
  color: #c0c4cc !important;
}
</style>
